<template>
  <n-spin :show="val.loading">
    <div class="_mbbox boxgap">
      <div class="nbox1 bg5" v-if="val.part == null">
        <n-h3>入驻功能说明</n-h3>

        <div>通过获取账号Cookie自动请求百宝袋模拟账号获取公会数据</div>
        <div>1、使用本功能说明你同意本站使用Cookie获取百宝袋数据</div>
        <div>2、Cookie退出账号、切换账号、修改密码都会刷新Cookie导致失效</div>
        <div>3、已入驻的公会只会更新百宝袋Cookie</div>
        <div>4、Cookie有效期一年左右，过期后需要重新入驻</div>
      </div>
      <div class="nbox1 bg5" v-if="val.part == null">
        <n-h3>【手机】通过远程服务器扫码获取Cookie</n-h3>
        <div>
          由于浏览器跨域规则限制，无法通过本地自动获取Cookie，只能通过远程服务器模拟登录【可通过第二种方法手动本地获取】
        </div>

        <div>通过猫燐的服务器模拟登录，获取当前账号登录Cookie</div>
        <div>1、扫码操作会显示异地扫码登录，登录区域显示【中国-宁波】</div>
        <div>2、通过B站客户端登录账号，进入【我的】点击扫码图标</div>
        <div>3、点击获取二维码</div>
        <div>4、扫描屏幕中出现的二维码完成入驻</div>
        <n-hr />
        <div>如果没有电脑设备，手机截屏后选择相册文件</div>
        <div style="display: flex; gap: 10px; flex-direction: row; flex-wrap: wrap">
          <n-button @click="set.getcode" type="gt_y">【第一步】获取或刷新二维码</n-button>
          <n-button @click="set.ckcode" type="gt_n">【第二步】验证二维码</n-button>
        </div>
        <div style="margin-top: 12px" v-if="val.qrurl != null">
          <n-qr-code :value="val.qrurl" size="185" />
        </div>
      </div>
      <div class="nbox1 bg5" v-if="val.part == null">
        <n-h3>【电脑】通过本地手动获取Cookie</n-h3>
        <div>手动本地浏览器获取Cookie，无需扫码登录不会报风险</div>
        <div>1、进入F12-DevTools开发者模式</div>
        <div>2、打开任意B站页面 -> 选择网络</div>
        <div>3、复制输入 cookie-name:SESSDATA nav -> 点击任意一个数据【没有F5刷新】</div>
        <div>4、复制整段Cookie内容或找到SESSDATA内的内容，粘贴到下方。</div>
        <n-hr />
        <div>
          <n-input v-model:value="val.cookie" type="text" placeholder="粘贴到这里" />
        </div>
        <br />
        <n-button @click="set.checkcookie" strong secondary type="info"
          >提交Cookie数据</n-button
        >
      </div>
      <div class="nbox1" v-if="val.part == 1">
        <div class="nbox2">
          <n-h3>检查公会信息</n-h3>
          <div>公会名称：{{ val.guild?.guild_name }}</div>
          <div>账号名称：{{ val.guild?.user_name }}</div>
          <n-hr />
          <div>
            <n-button @click="set.subguild" type="gt_y">确认入驻该公会</n-button>
          </div>
        </div>
      </div>
      <div class="nbox1" v-if="val.part == 2">
        <div class="nbox2">
          <n-h3>入驻/更新成功</n-h3>
          <div>现在可在工具站查看公会数据，也以通过RinBot获取公会数据</div>
          <br />

          <div>
            <router-link
              :to="{
                params: {
                  id: `info`,
                },
                query: {
                  sea_guild: val.guild?.guild_name,
                },
              }"
            >
              <n-button type="gt_y">查看公会数据</n-button>
            </router-link>
          </div>
          <n-hr />
          <n-h3>如何使用RinBot</n-h3>
          <div>
            添加QQ选择机器人搜索3889000841，邀请到公会群输入绑定公会{{
              val.guild?.guild_name
            }}
          </div>
        </div>
      </div>
    </div>
  </n-spin>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";

export default defineComponent({
  setup() {
    let set = {
      subguild: async () => {
        try {
          val.loading = true;
          const back = await cfg.mget({
            url: `${cfg.url2}api/rz`,
            query: {
              type: "sub_guild",
              code: val.cookie,
            },
          });
          if (back.code == 0) {
            val.part = 2;
            val.loading = false;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading = false;
          cfg.alert3({
            message: `${error.message}`,
          });
        }
      },
      ckcode: async () => {
        try {
          val.loading = true;
          const back = await cfg.mget({
            url: `${cfg.url2}api/qrcode`,
            query: {
              type: "check_code",
              qrcode: val.qrcode,
            },
          });
          if (back.code == 0) {
            val.cookie = back.data;
            val.loading = false;
            set.checkcookie();
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading = false;
          cfg.alert3({
            message: `${error.message}`,
          });
        }
      },
      checkcookie: async () => {
        try {
          val.loading = true;
          const d = val.cookie;
          //获取cookie中数据为SESSDATA的值
          const SESSDATA = d?.match(/SESSDATA=(.*?);/)?.[1];
          if (SESSDATA != undefined) {
            val.cookie = SESSDATA;
          }
          const back = await cfg.mget({
            url: `${cfg.url2}api/rz`,
            query: {
              type: "get_guild",
              code: val.cookie,
            },
          });
          if (back.code == 0) {
            val.loading = false;
            val.part = 1;
            val.guild = back.data;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading = false;
          cfg.alert3({
            message: `${error.message}`,
          });
        }
      },
      getcode: async () => {
        try {
          val.loading = true;
          const back = await cfg.mget({
            url: `${cfg.url2}api/qrcode`,
            query: {
              type: "get_code",
            },
          });
          if (back.code == 0) {
            const d = back.data;
            val.qrurl = d.url;
            val.qrcode = d.qrcode_key;
            val.loading = false;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading = false;
          cfg.alert3({
            message: `${error.message}`,
          });
        }
      },
    };
    let val = reactive({
      qrurl: null,
      loading: false,
      qrcode: null,
      cookie: ``,
    });

    return {
      val,
      set,
      cfg,
    };
  },
});
</script>
